<template>
    <div class="my-account">
        <h1 class="title">My Account</h1>
        <div class="cont">
          <div class="input-box">
            <p class="text"> <span>Top Cashback</span> <span class="more" @click="goDetails">Details</span></p>
            <div class="cashback cashback1 red">${{total}}</div>
          </div>
          <div class="input-box">
            <p class="text"> <span>Paypal Account</span> <span class="more" @click="changePay" v-html="PayChangeText">Change</span></p>
            <div class="cashback cashback1">{{payAccount}}</div>
            <p class="trueInfo" v-show="isChageSuc">Update success</p>
          </div>
          <!--修改payAccount-->
          <div v-show="isChangePay">
            <div class="change-pwd">Change Your PayPal Account</div>
            <div class="input-box">
              <p class="text"> <span>New Email Address</span></p>
              <input type="text" class="cashback cashback2" v-model="newPayEmail" id="newPayInput" @blur="checkEmail" >
              <p class="error-info red" v-html="emailInfo"></p>
            </div>
            <div class="input-box">
              <p class="text"> <span>Please enter your password</span></p>
              <input type="text" class="cashback cashback2" v-model="cfPaPassword" @keyup.enter="upadtePayEmail">
              <p class="error-info red" v-html="emailInfo1"></p>
            </div>
            <button class="change-btn update-account" @click="upadtePayEmail">Update</button><span class="trueInfo" v-show="isChageSuc">Update Success</span>
          </div>
          <!--修改密码-->
          <div class="change-pwd">Change Your Password</div>
          <div class="input-box">
            <p class="text"> <span>Current Password</span></p>
            <input type="text" class="cashback cashback2"  v-model="oldPassword" @blur="oldPasswordWatch" @input="oldPasswordWatch" @focus="clearErrorInfo">
            <p class="error-info red"  v-html="pwdErrorInfo"></p>
          </div>
          <div class="input-box">
            <p class="text"> <span>New Password</span></p>
            <input type="text" class="cashback cashback2" v-model="uppassword" @blur="oldPasswordWatch" @input="oldPasswordWatch" @focus="clearErrorInfo">
            <p class="error-info red" v-html="pwdErrorInfo2"></p>
          </div>
          <div class="input-box">
            <p class="text"> <span>Retype New Password</span></p>
            <input type="text" class="cashback cashback2" v-model="cfpassword" @keyup.enter="submitPwd">
            <p class="error-info red" v-html="pwdErrorInfo1"></p>
          </div>
          <button class="change-btn" @click="submitPwd">Change</button><span class="trueInfo"  v-show="changePwdOk">Change Success</span>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
  import {MyAccount,GetTotalRebate,UpdateAccountPwd,UpPaypalAccount} from 'api/my-account'
  import {mapMutations,mapActions} from 'vuex'
    export default {
        data(){
          return{
            isChangePay : false, //显示修改pay input
            isCheckOkPay : false, //正则通过，允许提交
            isChageSuc: false, //修改成功，显示提示
            PayChangeText:'Change',//change 按钮文字
            newPayEmail: '', //pay input value
            cfPaPassword:'',//pay pwd input value
            emailInfo:'', //错误信息显示
            emailInfo1:'', //确认密码错误信息显示
            total:0, //总金额
            payAccount : '---',//显示的payAccount
            oldPassword : '',
            uppassword : '',
            cfpassword : '',
            PAErrorInfo : '',
            pwdErrorInfo: '',
            pwdErrorInfo1: '',
            pwdErrorInfo2: '',
            canSubmit: false,
            oldPasswordOk: false,
            changePwdOk: false,
          }
        },
      created() {
        this.$nextTick(function(){
          this._MyAccount()
        })
      },
      methods:{
        _MyAccount() {
            GetTotalRebate().then((res) => {
              if (res) {
                this.total = res.amount
              }
            })
            MyAccount().then((res) => {
              if (res) {
               // this.total = res.cashBackAmount.amount
                this.payAccount = res.paypalAccount
              }
            })
        },
        goDetails(){
          this.$router.push({//
            path: '/my-account/cashback-detail'
          });
        },
        changePay(){
          if(this.isChangePay){
            this.isChangePay = false
            this.PayChangeText ='Change'
          }else{
            this.isChangePay = true
            this.PayChangeText ='Cancel'
            setTimeout(function(){
              document.getElementById('newPayInput').focus()
            })
          }
        },
        checkEmail(){
          let str =this.newPayEmail.trim();
          if(str === ''){
            this.emailInfo ='Please enter email address.'
            this.isCheckOkPay = false
            return
          }
          if (!/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/.test(str)){
            this.emailInfo ='Please enter a correct email address.'
            this.isCheckOkPay = false
            return
          }
          if(this.payAccount === str){ //当是旧的邮箱时
            this.emailInfo ='no change'
            this.isCheckOkPay = false
            return
          }
          this.isCheckOkPay = true
          this.emailInfo = ''
        },
        upadtePayEmail(){
          //修改邮箱请求
          if(!this.isCheckOkPay) {
            return
          }
          if(this.cfPaPassword.trim()===''){
            this.emailInfo1 = "please enter"
            return
          }
            let str = this.newPayEmail.trim()
            let pwd = this.cfPaPassword.trim()
            this._UpPaypalAccount(str,pwd)
        },
        _UpPaypalAccount(str,pwd){
          UpPaypalAccount(str,pwd).then((res) => {
            this.isChageSuc = true
            let _this = this
            setTimeout(function () {
              _this.isChageSuc = false
            }, 1500);
            this.PayChangeText = 'Change'
            this.isChangePay = false
            MyAccount().then((res) => {
              if (res) {
                this.payAccount = res.paypalAccount
              }
            })
          })
        },
        oldPasswordWatch(){
          if(this.oldPassword.trim() === ''){
            this.pwdErrorInfo = 'please enter';
            this.oldPasswordOk = false;
          }else if(!/[a-z]/.test(this.oldPassword.trim())){
            this.pwdErrorInfo = 'lowercase letters'
            this.oldPasswordOk = false
          }else if (!/.{8,}/.test(this.oldPassword.trim())){
            this.pwdErrorInfo = '8 or more characters'
            this.oldPasswordOk = false
          }else if(!/[0-9]/.test(this.oldPassword.trim())){
            this.pwdErrorInfo = 'At least one number'
            this.oldPasswordOk = false
          }else{
            this.pwdErrorInfo=''
            this.oldPasswordOk = true
          }
        },
        clearErrorInfo(){
          if(this.oldPasswordOk){
            this.pwdErrorInfo = ''
          }else if(this.canSubmit){
            this.pwdErrorInfo2=''
            this.pwdErrorInfo1=''
          }
        },
        submitPwd(){
          if(this.canSubmit === false && this.oldPasswordOk ===false){
            return
          }
          if(this.cfpassword.trim() === ''){
            this.pwdErrorInfo1 = 'please enter';
            return
          }
          if(this.uppassword.trim() !== this.cfpassword.trim()){
            this.pwdErrorInfo1 = 'Two passwords don\'t match';
            return
          }
          this.pwdErrorInfo1 = '';
          //调用修改密码接口
          let data ={
            oldPassword:this.oldPassword.trim(),
            NewPassword:this.cfpassword.trim()
          }
          this._UpdateAccountPwd(data)
        },
        _UpdateAccountPwd(passwrod) {
          UpdateAccountPwd(passwrod).then((res) => {
            this.changePwdOk = true
            let _this = this;
            setTimeout(function(){
              _this.changePwdOk = false
            },1500)
          })
        }
      }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">

  .my-account
    width:100%;
    padding-bottom:75px;
    .red
      color:#fb333e !important
    .trueInfo
      color:#18823a
      font-size:16px;
      margin-left:20px;
    .title
      font-size: 36px;
      line-height: 70px;
      color: #333333
      padding-top: 10px;
    .cont
      width:515px;
      padding-left:15px;
      padding-top:15px;
      .input-box
        width: 100%
        height: 120px;
        .text
          position:relative
          font-size:16px
          margin-bottom: 18px;
          .more
            position:absolute
            right:0
            bottom: -9px;
            color:#1797e1
            font-size:14px;
            cursor:pointer
        .cashback
          height:48px;
          line-height:48px;
          border:1px solid #ddd
          border-radius:2px;
          font-size: 20px;
          color:#a5a8ab
        .cashback1
          text-align center
          width: 100%
        .cashback2
          padding-left: 3%
          width: 97%
          font-size:14px
          color:#333
        .error-info
          font-size:14px;
          margin-top: 5px;
      .change-pwd
        margin-bottom: 28px;
        font-size: 20px;
      .change-btn
        width: 180px;
        height: 40px;
        background-color: #18823a;
        border-radius: 2px;
        border:none
        color: #fff
        font-size:16px
        cursor:pointer
      .update-account
        margin-bottom: 50px;
      .close-more
        color:#1797e1
        margin-left:20px;
        cursor:pointer



</style>
